<div class="knowledge-detail-container">
  <!-- 返回按钮和面包屑导航 -->
  <div class="detail-header">
    <button class="btn btn-back" onclick="history.back()">
      <i class="fas fa-arrow-left"></i> 返回
    </button>
    <div class="breadcrumb">
      <span>知识库</span>
      <i class="fas fa-chevron-right"></i>
      <span>政策法规库</span>
    </div>
  </div>

  <!-- 知识库标题和操作按钮 -->
  <div class="detail-title-bar">
    <div class="title-group">
      <div class="detail-icon" style="background-color: #e3f2fd;">
        <i class="fas fa-landmark" style="color: #1976d2;"></i>
      </div>
      <h1>政策法规库</h1>
    </div>
    <div class="detail-actions">
      <button class="btn btn-outline"><i class="fas fa-download"></i> 导出</button>
      <button class="btn btn-outline"><i class="fas fa-share-alt"></i> 分享</button>
      <button class="btn btn-primary"><i class="fas fa-plus"></i> 添加文档</button>
    </div>
  </div>

  <!-- 知识库描述和统计信息 -->
  <div class="detail-meta">
    <p class="detail-desc">收录国家及地方各级政策法规文件，包括法律、行政法规、部门规章、地方性法规等。</p>
    <div class="meta-stats">
      <div class="stat-item">
        <div class="stat-value">1,245</div>
        <div class="stat-label">文档数量</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">32</div>
        <div class="stat-label">分类标签</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">公共</div>
        <div class="stat-label">访问权限</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">2023-12-15</div>
        <div class="stat-label">最后更新</div>
      </div>
    </div>
  </div>

  <!-- 内容区域 - 分为侧边栏和主内容区 -->
  <div class="detail-content">
    <!-- 侧边栏 - 分类导航 -->
    <div class="detail-sidebar">
      <div class="sidebar-section">
        <h3 class="sidebar-title">分类筛选</h3>
        <ul class="category-list">
          <li class="active">全部文档</li>
          <li>法律</li>
          <li>行政法规</li>
          <li>部门规章</li>
          <li>地方性法规</li>
          <li>规范性文件</li>
          <li>国际条约</li>
        </ul>
      </div>
      <div class="sidebar-section">
        <h3 class="sidebar-title">时间筛选</h3>
        <div class="year-filter">
          <div class="year-item active">全部</div>
          <div class="year-item">2023</div>
          <div class="year-item">2022</div>
          <div class="year-item">2021</div>
          <div class="year-item">2020</div>
          <div class="year-item">更早</div>
        </div>
      </div>
      <div class="sidebar-section">
        <h3 class="sidebar-title">标签云</h3>
        <div class="tag-cloud">
          <span class="tag">宪法</span>
          <span class="tag">民法</span>
          <span class="tag">刑法</span>
          <span class="tag">行政法</span>
          <span class="tag">经济法</span>
          <span class="tag">社会法</span>
          <span class="tag">环境法</span>
          <span class="tag">劳动法</span>
        </div>
      </div>
    </div>

    <!-- 主内容区 - 文档列表 -->
    <div class="detail-main">
      <!-- 搜索和筛选栏 -->
      <div class="doc-toolbar">
        <div class="search-box">
          <input type="text" placeholder="在政策法规库中搜索..." class="search-input">
          <button class="search-button"><i class="fas fa-search"></i></button>
        </div>
        <div class="sort-options">
          <select class="sort-select">
            <option>按时间排序</option>
            <option>按名称排序</option>
            <option>按热度排序</option>
          </select>
          <button class="btn btn-outline"><i class="fas fa-filter"></i> 高级筛选</button>
        </div>
      </div>

      <!-- 文档列表 -->
      <div class="doc-list">
        <!-- 文档项 1 -->
        <div class="doc-item">
          <div class="doc-icon">
            <i class="fas fa-file-pdf" style="color: #d32f2f;"></i>
          </div>
          <div class="doc-info">
            <h3 class="doc-title">中华人民共和国宪法（2023修正版）</h3>
            <div class="doc-meta">
              <span><i class="fas fa-tag"></i> 宪法</span>
              <span><i class="fas fa-calendar-alt"></i> 2023-03-15</span>
              <span><i class="fas fa-eye"></i> 1,245次浏览</span>
              <span><i class="fas fa-download"></i> 328次下载</span>
            </div>
            <p class="doc-desc">《中华人民共和国宪法》是中华人民共和国的根本大法，规定拥有最高法律效力。2023年第十四届全国人民代表大会第一次会议通过宪法修正案。</p>
          </div>
          <div class="doc-actions">
            <button class="btn btn-sm btn-outline"><i class="fas fa-eye"></i> 预览</button>
            <button class="btn btn-sm btn-primary"><i class="fas fa-download"></i> 下载</button>
          </div>
        </div>

        <!-- 文档项 2 -->
        <div class="doc-item">
          <div class="doc-icon">
            <i class="fas fa-file-word" style="color: #2b579a;"></i>
          </div>
          <div class="doc-info">
            <h3 class="doc-title">中华人民共和国民法典</h3>
            <div class="doc-meta">
              <span><i class="fas fa-tag"></i> 民法</span>
              <span><i class="fas fa-calendar-alt"></i> 2020-05-28</span>
              <span><i class="fas fa-eye"></i> 892次浏览</span>
              <span><i class="fas fa-download"></i> 256次下载</span>
            </div>
            <p class="doc-desc">《中华人民共和国民法典》被称为"社会生活的百科全书"，是新中国第一部以法典命名的法律，共7编、1260条，自2021年1月1日起施行。</p>
          </div>
          <div class="doc-actions">
            <button class="btn btn-sm btn-outline"><i class="fas fa-eye"></i> 预览</button>
            <button class="btn btn-sm btn-primary"><i class="fas fa-download"></i> 下载</button>
          </div>
        </div>

        <!-- 文档项 3 -->
        <div class="doc-item">
          <div class="doc-icon">
            <i class="fas fa-file-excel" style="color: #217346;"></i>
          </div>
          <div class="doc-info">
            <h3 class="doc-title">中华人民共和国刑法修正案（十二）</h3>
            <div class="doc-meta">
              <span><i class="fas fa-tag"></i> 刑法</span>
              <span><i class="fas fa-calendar-alt"></i> 2022-12-30</span>
              <span><i class="fas fa-eye"></i> 756次浏览</span>
              <span><i class="fas fa-download"></i> 198次下载</span>
            </div>
            <p class="doc-desc">《中华人民共和国刑法修正案（十二）》对刑法部分条款进行了修改，主要涉及反腐败、金融犯罪等内容，自2023年3月1日起施行。</p>
          </div>
          <div class="doc-actions">
            <button class="btn btn-sm btn-outline"><i class="fas fa-eye"></i> 预览</button>
            <button class="btn btn-sm btn-primary"><i class="fas fa-download"></i> 下载</button>
          </div>
        </div>

        <!-- 文档项 4 -->
        <div class="doc-item">
          <div class="doc-icon">
            <i class="fas fa-file-powerpoint" style="color: #d24726;"></i>
          </div>
          <div class="doc-info">
            <h3 class="doc-title">中华人民共和国行政许可法</h3>
            <div class="doc-meta">
              <span><i class="fas fa-tag"></i> 行政法</span>
              <span><i class="fas fa-calendar-alt"></i> 2019-04-23</span>
              <span><i class="fas fa-eye"></i> 689次浏览</span>
              <span><i class="fas fa-download"></i> 187次下载</span>
            </div>
            <p class="doc-desc">《中华人民共和国行政许可法》是为了规范行政许可的设定和实施，保护公民、法人和其他组织的合法权益，维护公共利益和社会秩序而制定的法律。</p>
          </div>
          <div class="doc-actions">
            <button class="btn btn-sm btn-outline"><i class="fas fa-eye"></i> 预览</button>
            <button class="btn btn-sm btn-primary"><i class="fas fa-download"></i> 下载</button>
          </div>
        </div>

        <!-- 文档项 5 -->
        <div class="doc-item">
          <div class="doc-icon">
            <i class="fas fa-file-alt" style="color: #6c757d;"></i>
          </div>
          <div class="doc-info">
            <h3 class="doc-title">中华人民共和国环境保护法（2023修订）</h3>
            <div class="doc-meta">
              <span><i class="fas fa-tag"></i> 环境法</span>
              <span><i class="fas fa-calendar-alt"></i> 2023-06-05</span>
              <span><i class="fas fa-eye"></i> 542次浏览</span>
              <span><i class="fas fa-download"></i> 156次下载</span>
            </div>
            <p class="doc-desc">《中华人民共和国环境保护法》是为保护和改善环境，防治污染和其他公害，保障公众健康，推进生态文明建设，促进经济社会可持续发展而制定的法律。</p>
          </div>
          <div class="doc-actions">
            <button class="btn btn-sm btn-outline"><i class="fas fa-eye"></i> 预览</button>
            <button class="btn btn-sm btn-primary"><i class="fas fa-download"></i> 下载</button>
          </div>
        </div>
      </div>

      <!-- 分页控件 -->
      <div class="pagination">
        <button class="page-btn"><i class="fas fa-angle-left"></i></button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <span class="page-ellipsis">...</span>
        <button class="page-btn">8</button>
        <button class="page-btn"><i class="fas fa-angle-right"></i></button>
      </div>
    </div>
  </div>
</div>

<style>
  /* 知识库详情页面样式 */
  .knowledge-detail-container {
    padding: 0;
    max-width: 1400px;
    margin: 0 auto;
  }

  .detail-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .btn-back {
    background-color: transparent;
    color: #1a5fb4;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    margin-right: 20px;
  }

  .btn-back:hover {
    background-color: #f0f7ff;
    border-radius: 4px;
  }

  .breadcrumb {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 14px;
  }

  .breadcrumb i {
    margin: 0 10px;
    font-size: 12px;
    color: #999;
  }

  .detail-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }

  .title-group {
    display: flex;
    align-items: center;
  }

  .detail-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
  }

  .detail-title-bar h1 {
    margin: 0;
    font-size: 24px;
    color: #333;
  }

  .detail-actions {
    display: flex;
    gap: 10px;
  }

  .detail-meta {
    margin-bottom: 30px;
  }

  .detail-desc {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .meta-stats {
    display: flex;
    gap: 30px;
  }

  .stat-item {
    text-align: center;
  }

  .stat-value {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }

  .stat-label {
    font-size: 12px;
    color: #888;
  }

  .detail-content {
    display: flex;
    gap: 30px;
  }

  .detail-sidebar {
    width: 250px;
    flex-shrink: 0;
  }

  .sidebar-section {
    margin-bottom: 30px;
  }

  .sidebar-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
  }

  .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .category-list li {
    padding: 8px 15px;
    margin-bottom: 5px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  .category-list li:hover {
    background-color: #f0f7ff;
    color: #1a5fb4;
  }

  .category-list li.active {
    background-color: #e6f0ff;
    color: #1a5fb4;
    font-weight: bold;
  }

  .year-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .year-item {
    padding: 5px 10px;
    background-color: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
  }

  .year-item:hover {
    background-color: #e0e0e0;
  }

  .year-item.active {
    background-color: #1a5fb4;
    color: white;
  }

  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tag {
    padding: 4px 10px;
    background-color: #f0f7ff;
    color: #1a5fb4;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
  }

  .tag:hover {
    background-color: #d6e7ff;
  }

  .detail-main {
    flex: 1;
  }

  .doc-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .search-box {
    display: flex;
    width: 400px;
  }

  .search-input {
    flex: 1;
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    outline: none;
  }

  .search-button {
    padding: 8px 15px;
    background-color: #1a5fb4;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
  }

  .sort-options {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sort-select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
  }

  .doc-list {
    margin-bottom: 30px;
  }

  .doc-item {
    display: flex;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .doc-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .doc-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 20px;
  }

  .doc-info {
    flex: 1;
  }

  .doc-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
  }

  .doc-meta {
    display: flex;
    gap: 15px;
    color: #888;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .doc-meta i {
    margin-right: 5px;
  }

  .doc-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
  }

  .doc-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-left: 20px;
  }

  /* 响应式设计 */
  @media (max-width: 1200px) {
    .detail-content {
      flex-direction: column;
    }

    .detail-sidebar {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
    }

    .sidebar-section {
      flex: 1;
      min-width: 200px;
    }
  }

  @media (max-width: 768px) {
    .detail-title-bar {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
    }

    .title-group {
      width: 100%;
    }

    .detail-actions {
      width: 100%;
      justify-content: flex-end;
    }

    .meta-stats {
      flex-wrap: wrap;
      gap: 15px;
    }

    .doc-toolbar {
      flex-direction: column;
      gap: 15px;
    }

    .search-box {
      width: 100%;
    }

    .doc-item {
      flex-direction: column;
    }

    .doc-icon {
      margin-right: 0;
      margin-bottom: 15px;
    }

    .doc-actions {
      flex-direction: row;
      margin-left: 0;
      margin-top: 15px;
      justify-content: flex-end;
    }
  }
</style>

<script>
  alert("11111")
  // 分类筛选点击事件
  document.querySelectorAll('.category-list li').forEach(item => {
    item.addEventListener('click', function() {
      document.querySelectorAll('.category-list li').forEach(i => {
        i.classList.remove('active');
      });
      this.classList.add('active');
      console.log('筛选分类:', this.textContent);
    });
  });

  // 年份筛选点击事件
  document.querySelectorAll('.year-item').forEach(item => {
    item.addEventListener('click', function() {
      document.querySelectorAll('.year-item').forEach(i => {
        i.classList.remove('active');
      });
      this.classList.add('active');
      console.log('筛选年份:', this.textContent);
    });
  });

  // 标签点击事件
  document.querySelectorAll('.tag').forEach(tag => {
    tag.addEventListener('click', function() {
      console.log('筛选标签:', this.textContent);
    });
  });

  // 文档操作按钮事件
  document.querySelectorAll('.doc-actions .btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const action = this.querySelector('i').className.includes('eye') ? '预览' : '下载';
      const docTitle = this.closest('.doc-item').querySelector('.doc-title').textContent;
      console.log(`${action}文档: ${docTitle}`);
    });
  });
</script>